<template>
  <div>
    <TypographyTitle>
      <TypographyTitle :level="3">基座-承载micro-app-vue3的路由容器</TypographyTitle>
    </TypographyTitle>
    <TestCmp />
    <micro-app
      name="micro-app-vue3"
      url="http://localhost:5001/subapp-vue3/"
      baseroute="/micro-app-vue3"
      :data="reactiveData"
      @datachange="handleDataChange"
    />

    <a-divider class="!my-8">下方是基座的 micro-app-vue3 应用容器范围</a-divider>

    <div class="p-4 shadow space-x-3">
      <Typography v-if="reactiveData">
        <blockquote> 默认给micro-app-vue3通过属性的形式传递一段数据</blockquote>
        <pre>{{ reactiveData }}</pre>
      </Typography>
      <a-button @click="getReactiveData">
        获取：测试默认下发的数据是否是引用值，子应用是否能直接修改
      </a-button>
      <div class="space-x-3 mt-3">
        <a-button @click="reactiveData && reactiveData.count++">修改默认值的count值</a-button>
        <a-button>reactiveData.count：{{ reactiveData && reactiveData.count }}</a-button>
        <a-button @click="resetMicroAppData">将reactiveData的值的引用改掉</a-button>
        <a-button @click="reactiveData.arr = null">修改reactiveData中arr的值</a-button>
      </div>
      <div class="space-x-3 mt-3">
        <a-button @click="dispatchCommandToData">指定name命令式下发数据</a-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref } from 'vue';
  import { Typography } from 'ant-design-vue';
  import TestCmp from '@/views/test/Test';
  import microApp from '@micro-zoe/micro-app';

  export default defineComponent({
    name: 'MicroAppVue3',
    components: {
      TestCmp,
      Typography,
      TypographyTitle: Typography.Title,
    },
    setup() {
      const reactiveData = ref({
        name: 'micro-app-vue3',
        count: 1,
        arr: [],
      });

      function getReactiveData() {
        console.log(reactiveData);
      }

      function resetMicroAppData() {
        reactiveData.value = {
          name: 'micro-app-vue3',
          count: 100,
          arr: [],
        };
      }

      function dispatchCommandToData() {
        microApp.setData('micro-app-vue3', {
          name: 'micro-app-vue3',
          count: 1000,
          arr: [],
        });
      }

      function handleDataChange(e) {
        console.log('子应用派发过来的数据 >>> ', e.detail.data);
      }

      return {
        reactiveData,
        getReactiveData,
        resetMicroAppData,
        dispatchCommandToData,
        handleDataChange,
      };
    },
  });
</script>
